<template>
  <div>
    <a-drawer
      v-model:open="open"
      title="订单信息"
      width="80%"
      placement="right"
      v-if="orderInfo.shopOrderDto"
    >
      <template #extra>
        <a-space v-if="orderInfo.shopOrderDto.orderState == 2" wrap>
          <a-button
            v-if="orderInfo.shopOrderDto.orderState == 9"
            @click="deliverGoodsFunc(orderInfo.shopOrderDto.id, 1, 1)"
            >发货给用户</a-button
          >
          <a-button
            type="primary"
            danger
            @click="cancelOrderFunc(orderInfo.shopOrderDto.id)"
            >取消订单</a-button
          >
          <a-button
            v-if="orderInfo.shopOrderDto.orderState == 7"
            type="primary"
            @click="handleEnterResult(orderInfo.shopOrderDto.id)"
            >录入鉴定结果</a-button
          >
          <a-button
            v-if="orderInfo.shopOrderDto.orderState == 8"
            type="primary"
            @click="deliverGoodsFunc(orderInfo.shopOrderDto.id, 1, 2)"
            >发货给商家</a-button
          >
        </a-space>
      </template>
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-descriptions title="" :column="{ xxl: 5 }">
          <a-descriptions-item label="订单编号">{{
            orderInfo.shopOrderDto.orderNo
          }}</a-descriptions-item>
          <a-descriptions-item label="下单时间">{{
            orderInfo.shopOrderDto.createdTime
          }}</a-descriptions-item>
          <a-descriptions-item label="下单用户">{{
            orderInfo.nickname
          }}</a-descriptions-item>
          <a-descriptions-item label="用户电话">{{
            orderInfo.phone
          }}</a-descriptions-item>
          <a-descriptions-item label="订单状态">{{
            orderStateEnum.getNameByValue(orderInfo.shopOrderDto.orderState)
          }}</a-descriptions-item>
          <a-descriptions-item label="收件人">{{
            orderInfo.shopOrderDto.contactUserName
          }}</a-descriptions-item>
          <a-descriptions-item label="联系电话">{{
            orderInfo.shopOrderDto.contactMobile
          }}</a-descriptions-item>
          <a-descriptions-item label="收件地址"
            >{{ orderInfo.shopOrderDto.address }}
            <a-button
              type="link"
              size="small"
              danger
              @click="handleCopy(orderInfo.shopOrderDto.address)"
              >复制地址</a-button
            >
          </a-descriptions-item>
        </a-descriptions>

        <a-card hoverable @click="seeGoods(orderInfo.shopOrderDto.goodsId)">
          <div class="table-item-layout">
            <div class="table-item" style="width: 30%">
              <div class="table-flex">
                <a-image
                  :src="orderInfo.shopOrderDto.coverPic"
                  :preview="{
                    src: orderInfo.shopOrderDto.coverPic,
                  }"
                  :width="120"
                />
                <div style="margin-left: 20px">
                  <div>{{ orderInfo.shopOrderDto.goodsName }}</div>
                  <div>商品编号：{{ orderInfo.shopOrderDto.goodsNo }}</div>
                  <div>价 格：{{ orderInfo.shopOrderDto.totalAmount }}</div>
                </div>
              </div>
            </div>
            <div class="table-item">
              <div>
                会员满减：¥{{ orderInfo.shopOrderDto.vipDiscountAmount }}
              </div>
              <div>
                优 惠 券：¥{{ orderInfo.shopOrderDto.couponDiscountAmount }}
              </div>
              <div>
                积分抵扣：¥{{ orderInfo.shopOrderDto.pointDiscountAmount }}
              </div>
            </div>
            <div class="table-item">
              <div>
                支付方式：
                <a-typography-text type="secondary">微信支付</a-typography-text>
              </div>
              <div>
                配送方式：{{
                  deliveryTypeArr[orderInfo.shopOrderDto.deliveryType - 1]
                }}
              </div>
            </div>

            <div class="table-item">
              <div>
                实付金额：<text
                  style="font-size: 16px; color: #1990ff; font-weight: 600"
                  >¥{{ orderInfo.shopOrderDto.payAmount }}</text
                >
              </div>
              <div>
                支付时间：<a-typography-text type="secondary">{{
                  orderInfo.shopOrderDto.payTime
                }}</a-typography-text>
              </div>
            </div>
          </div>
        </a-card>

        <!-- <div class="title-layout">
          <div class="title">备注</div>
          <a-button type="primary">保存</a-button>
        </div>
        <a-textarea :rows="6" placeholder="输入备注信息" :maxlength="500" />

        <a-table
          :dataSource="tableData"
          :columns="columns"
          :pagination="false"
        /> -->
        <a-descriptions
          title="商家信息"
          v-if="orderInfo.shopInfoDto"
          :column="4"
          bordered
          layout="vertical"
        >
          <a-descriptions-item label="店铺信息" span="1">
            <a-image
              :src="orderInfo.shopInfoDto.coverPic"
              :width="60"
              style="border-radius: 50%"
            />
            <span style="margin-left: 10px">
              {{ orderInfo.shopInfoDto.name }}
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="商家账号">{{
            orderInfo.shopInfoDto.username
          }}</a-descriptions-item>
          <a-descriptions-item label="商家类型">{{
            orderInfo.shopInfoDto.companyType == 1 ? "个人" : "企业"
          }}</a-descriptions-item>
          <a-descriptions-item label="注册时间">{{
            orderInfo.shopInfoDto.createdTime
          }}</a-descriptions-item>
        </a-descriptions>
        <a-descriptions
          title="商家收货地址"
          v-if="orderInfo.shopInfoDto"
          :column="4"
          bordered
          layout="vertical"
        >
          <a-descriptions-item label="收件人">{{
            orderInfo.shopInfoDto.receiptName
          }}</a-descriptions-item>
          <a-descriptions-item label="联系电话">{{
            orderInfo.shopInfoDto.phone
          }}</a-descriptions-item>
          <a-descriptions-item label="收件地址">{{
            orderInfo.shopInfoDto.adress
          }}</a-descriptions-item>
        </a-descriptions>
        <a-descriptions
          v-if="
            orderInfo.orderProgessDtoList &&
            orderInfo.orderProgessDtoList.length > 0
          "
          title="订单进度"
          :column="{ xxl: 1 }"
        >
          <a-descriptions-item label="">
            <div>
              <div
                class="steps-item"
                v-for="(item, index) in orderInfo.orderProgessDtoList"
                :key="index"
              >
                <div class="left">
                  <div class="round"></div>
                  <div
                    class="line"
                    v-if="index < orderInfo.orderProgessDtoList.length - 1"
                  ></div>
                </div>
                <div>
                  <div class="steps-title">{{ item.title }}</div>
                  <div class="steps-content">
                    <div
                      class="steps-block"
                      v-for="ele in item.content"
                      :key="ele"
                    >
                      <template v-for="(node, nodeKey) in ele">
                        {{ nodeKey }}：
                        <a-typography-text
                          type="danger"
                          @click="handleShowDeliverly(node)"
                          v-if="nodeKey == '物流编号'"
                          >{{ node }}</a-typography-text
                        >
                        <span v-else>{{ node }}</span></template
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-descriptions-item>
        </a-descriptions>

        <a-descriptions
          v-if="orderInfo.goodAuthResultDto && orderInfo.goodAuthResultDto.orderNo"
          title="鉴定信息"
          :column="{ xxl: 1 }"
        >
          <a-descriptions-item label="鉴定结果">
            <a-tag color="error">{{
              goodAuthResultDtoArr[orderInfo.goodAuthResultDto.orderState - 1]
            }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="鉴定编号">{{
            orderInfo.goodAuthResultDto.orderNo
          }}</a-descriptions-item>
          <a-descriptions-item label="鉴定描述" v-if="orderInfo.goodAuthResultDto.reason">{{
            orderInfo.goodAuthResultDto.reason
          }}</a-descriptions-item>
          <a-descriptions-item label="鉴定凭证">
            <a-space wrap :size="16">
              <a-image
                :src="item"
                :preview="{
                  src: item,
                }"
                :width="90"
                v-for="(item, index) in orderInfo.goodAuthResultDto.authImgs"
              />
            </a-space>
          </a-descriptions-item>
        </a-descriptions>

        <a-descriptions
          v-if="orderInfo.orderRefundInfoDto"
          title="退款信息"
          :column="{ xxl: 1 }"
        >
          <a-descriptions-item label="退款状态">{{
            refundArr[orderInfo.orderRefundInfoDto.status - 1]
          }}</a-descriptions-item>
          <a-descriptions-item label="退款单号"
            >{{ orderInfo.orderRefundInfoDto.orderNo }}
            <a-button type="primary" size="small" @click="handleCopy(orderInfo.orderRefundInfoDto.orderNo)" style="margin-left: 10px"
              >复制</a-button
            ></a-descriptions-item
          >
          <a-descriptions-item label="退款时间">{{
            orderInfo.orderRefundInfoDto.createdTime
          }}</a-descriptions-item>
          <a-descriptions-item label="退款路径">{{
            orderInfo.orderRefundInfoDto.payType == 1 ? '微信' :  orderInfo.orderRefundInfoDto.payType == 2 ? '支付宝' : '银行卡'
          }}</a-descriptions-item>
          <a-descriptions-item label="退款金额"
            >¥{{
              orderInfo.orderRefundInfoDto.returnAmount
            }}</a-descriptions-item
          >
        </a-descriptions>
      </a-space>
    </a-drawer>

    <!-- 商品详情 -->
    <see ref="seeRef"></see>
    <!-- 鉴定结果 -->
    <appraiseResult ref="appraiseResultRef" @refreshList="refreshList" />
    <!-- 发货 -->
    <deliverGoods
      ref="deliverGoodsRef"
      @refreshList="refreshList"
    ></deliverGoods>
    <!-- 取消订单 -->
    <cancelOrder ref="cancelOrderRef" @refreshList="refreshList"></cancelOrder>
  </div>
</template>

<script setup>
import { ref } from "vue";
import orderStateEnum from "@/enums/orderStateEnum.js";
import see from "../../goodsManage/goodsManageModule/see.vue";
import appraiseResult from "./appraiseResult.vue";
import deliverGoods from "./deliverGoods.vue";
import cancelOrder from "./cancelOrder.vue";
import useClipboard from "vue-clipboard3";
import { message } from "ant-design-vue";
import { getShopOrderDetail } from "@/api/order";
const deliveryTypeArr = ["顺丰到付", "门店自提", "包邮"];
const goodAuthResultDtoArr = ["待鉴定", "鉴定成功", "鉴定失败"];
const refundArr = ["未退款", "已退款", "退款中"];
const open = ref(false);
const seeFunc = (id) => {
  getShopOrderDetailFn(id);
  open.value = true;
};

//查看详情
const seeRef = ref(null);
const seeGoods = (id) => {
  seeRef.value.seeFunc(id);
};
const orderInfo = ref({});
const getShopOrderDetailFn = async (id) => {
  const result = await getShopOrderDetail({ id: id });
  if (result.code == 200) {
    orderInfo.value = result.data;
  }
};
const { toClipboard } = useClipboard();
const handleCopy = async (text) => {
  await toClipboard(text); //实现复制
  message.info("复制成功");
};
const columns = ref([
  {
    title: "备注人",
    dataIndex: "name",
    key: "name",
    align: "center",
  },
  {
    title: "功能",
    dataIndex: "gn",
    key: "gn",
    align: "center",
  },
  {
    title: "备注时间",
    dataIndex: "time",
    key: "time",
    align: "center",
  },
  {
    title: "备注内容",
    dataIndex: "content",
    key: "content",
    align: "center",
  },
]);

const tableData = ref([
  {
    name: "小猪儿",
    gn: "取消订单",
    time: "2023/6/23 12:23",
    content: "包包有破损",
  },
  {
    name: "小猪儿",
    gn: "取消订单",
    time: "2023/6/23 12:23",
    content: "改变主意了",
  },
]);

// 录入鉴定结果 TODO
const appraiseResultRef = ref(null);
function handleEnterResult(id) {
  appraiseResultRef.value.open(id, 1);
}
// 发货
const deliverGoodsRef = ref(null);
const deliverGoodsFunc = (id, orderType, type) => {
  deliverGoodsRef.value.open(id, orderType, type);
};
// 取消订单
const cancelOrderRef = ref(null);
const cancelOrderFunc = (id) => {
  cancelOrderRef.value.open(id);
};
function refreshList() {
  getShopOrderDetailFn();
}
function handleShowDeliverly(text) {
  message.error(text);
}
defineExpose({ open, seeFunc });
</script>

<style lang="less">
.table-item-layout {
  display: flex;
  align-items: center;
  padding: 24px 0;
  box-sizing: border-box;
  .table-item:last-child {
    border-right: 0px solid #ffffff;
  }
  .table-item {
    width: 20%;
    height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 38px;
    box-sizing: border-box;
    border-right: 1px solid #e8ecf0;
    color: #2b3453;
    font-size: 14px;
    .table-flex {
      display: flex;
      align-items: center;
    }
  }
}

.title-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-size: 16px;
    color: #000000;
    font-weight: 600;
  }
}

.steps-item {
  display: flex;
  align-items: flex-start;
  .left {
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
    .round {
      width: 20px;
      height: 20px;
      background: #262e47;
      border-radius: 50%;
    }

    .line {
      width: 2px;
      height: 53px;
      background: #262e47;
    }
  }

  .steps-title {
    color: #2b3453;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .steps-content {
    display: flex;
    align-items: center;
    color: #2b3453;
    font-size: 12px;
    .steps-block {
      margin-right: 55px;

      text {
        color: #1990ff;
        cursor: pointer;
      }
    }
  }
}
</style>
